<template>
  <div class="section-card">
    <!-- section的头像 -->
    <img :src="section.image" alt />
    <div>
      <!-- section的名字 -->
      <div>
        <h1>{{section.name}}</h1>
      </div>
      <!-- section的简介 -->
      <div class="van-multi-ellipsis--l2">{{section.statement}}</div>
      <!-- section的浏览量和帖子数 -->
      <div class="count">{{viewcount}}浏览·{{topiccount}}帖子</div>
    </div>
  </div>
</template>

<script>
import utils from "@/common/utils";
export default {
  name: "section-card",
  props: ["name"],
  computed: {
    section() {
      var sections = this.$store.state.data.section;
      for (var i in sections) {
        if (sections[i].name === this.name) {
          return sections[i];
        }
      }
      return null;
    },
    viewcount() {
      return utils.numberShow(this.section.viewcount);
    },
    topiccount() {
      return utils.numberShow(this.section.topiccount);
    },
  },
};
</script>

<style scoped>
.section-card {
  background: #fff;
  border-radius: 10px;
  display: flex;
  margin: 10px;
  box-shadow: 3px 3px 5px 0px #97979759;
}
.section-card img {
  width: 70px;
  height: 70px;
  float: left;
  border-radius: 45px;
  padding: 10px;
  margin: 10px;
}
.section-card h1 {
  font-size: 24px;
  margin-bottom: 5px;
  display: none;
}
.section-card .van-multi-ellipsis--l2 {
  font-size: 15px;
  padding: 30px 10px 0 10px;
  color: grey;
  text-align: left;
  max-height: 40px;
  min-height: 30px;
}
.section-card .count {
  font-size: 13px;
  text-align: left;
  padding: 10px;
  color: gray;
}
</style>